import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:provider/provider.dart';
import 'package:koran/global.dart';
import 'package:koran/http/api.dart';
import 'package:flutter/material.dart';
import 'package:koran/main_manager.dart';

class DetailPage extends StatefulWidget {
  DetailPage({Key key, this.id}) : super(key: key);
  final String id;
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  var _data;
  var _id;
  @override
  void initState() {
    _id = widget.id;
    getKoranDetail(_id).then((res) {
      setState(() {
        _data = res;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    MainManager _mainManager = Provider.of<MainManager>(context);
    if (_data != null && _mainManager.history['id'] != _id) {
      _mainManager.insert({
        'id': _data['id'],
        'index': _data['index'],
        'title': _data['title'],
      });
    }
    return _data == null
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: Center(child: CircularProgressIndicator()),
            ),
          )
        : Scaffold(
            appBar: AppBar(
              title: Column(
                children: [
                  Text(
                    _data['index'],
                    style: TextStyle(
                      fontFamily: 'fangzhengkai',
                      fontSize: 11,
                      fontWeight: FontWeight.bold,
                      color: Global.fontSecondColor,
                    ),
                  ),
                  Text(
                    _data['title'],
                    style: TextStyle(
                      fontFamily: 'fangzhengkai',
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Global.fontColor,
                    ),
                  )
                ],
              ),
              elevation: 100,
              backgroundColor: Global.backgroundColor,
            ),
            body: FlutterEasyLoading(
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                decoration: BoxDecoration(
                  color: Global.backgroundColor.withOpacity(0.85),
                ),
                child: Stack(
                  children: [
                    Positioned(
                      top: 0,
                      right: 0,
                      child: Container(
                        width: MediaQuery.of(context).size.width - 100,
                        child: Image.asset('assets/images/1.png'),
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      child: Container(
                        width: MediaQuery.of(context).size.width - 100,
                        child: Image.asset('assets/images/2.png'),
                      ),
                    ),
                    Positioned(
                      top: 10,
                      left: 20,
                      right: 20,
                      bottom: 70,
                      child: SingleChildScrollView(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              _data['content'],
                              style: TextStyle(
                                color: Global.fontColor,
                                fontFamily: 'fangzhengkai',
                                fontSize: 17,
                                fontWeight: FontWeight.w600,
                                height: 2.2,
                              ),
                            ),
                            SizedBox(height: 35),
                          ],
                        ),
                      ),
                    ),
                    Positioned(
                      left: 0,
                      right: 0,
                      bottom: 0,
                      child: Container(
                        height: 70,
                        padding: EdgeInsets.only(bottom: 20),
                        decoration: BoxDecoration(
                          color: Global.backgroundColor.withOpacity(0.9),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.3),
                              offset: Offset(0, -1),
                              blurRadius: 15,
                              spreadRadius: 1,
                            )
                          ],
                        ),
                        child: Row(
                          children: [
                            _id != '1'
                                ? Expanded(
                                    child: InkWell(
                                      onTap: () {
                                        EasyLoading.show();
                                        getKoranDetail(
                                                (int.parse(_id) - 1).toString())
                                            .then((res) {
                                          EasyLoading.dismiss();
                                          setState(() {
                                            _id =
                                                (int.parse(_id) - 1).toString();
                                            _data = res;
                                          });
                                        });
                                      },
                                      child: Container(
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Icon(
                                              Icons.arrow_back_ios,
                                              color: Global.fontSecondColor,
                                              size: 17,
                                            ),
                                            SizedBox(width: 5),
                                            Text(
                                              '上一章',
                                              style: TextStyle(
                                                fontFamily: 'fangzhengkai',
                                                fontSize: 20,
                                                fontWeight: FontWeight.bold,
                                                color: Global.fontSecondColor,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  )
                                : Container(),
                            _id != '114'
                                ? Expanded(
                                    child: InkWell(
                                      onTap: () {
                                        EasyLoading.show();
                                        getKoranDetail(
                                                (int.parse(_id) + 1).toString())
                                            .then((res) {
                                          EasyLoading.dismiss();
                                          setState(() {
                                            _id =
                                                (int.parse(_id) + 1).toString();
                                            _data = res;
                                          });
                                        });
                                      },
                                      child: Container(
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Text(
                                              '下一章',
                                              style: TextStyle(
                                                fontFamily: 'fangzhengkai',
                                                fontSize: 20,
                                                fontWeight: FontWeight.bold,
                                                color: Global.fontSecondColor,
                                              ),
                                            ),
                                            SizedBox(width: 5),
                                            Icon(
                                              Icons.arrow_forward_ios,
                                              color: Global.fontSecondColor,
                                              size: 17,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  )
                                : Container(),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
  }
}
